<template>
    <div>
            <!-- 面包屑区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">人在回路</el-breadcrumb-item>
        <el-breadcrumb-item>数据</el-breadcrumb-item>
    </el-breadcrumb>
<!--      tab便签区域-->
      <el-card>
        <el-button class="queryBtn" @click="queryDataset" type="primary">查看数据集</el-button>
        <el-button class="queryBtn" @click="queryDatasetHuFea" type="primary">特征处理后数据集</el-button>
        <!-- <el-tabs v-model="activeName">
          <el-tab-pane label="上传数据" name="upload"> -->
            <el-form status-icon :model="uploadForm" :rules="uploadFormRules" ref="uploadFormRef"
                     label-width="200px" label-position="right">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="数据集名称" prop="dataset_name">
                      <el-input style="width:300px" clearable  v-model="uploadForm.dataset_name" placeholder="请输入数据集名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="须知">
                      <el-input style="width:300px" disabled  placeholder="数据集必须是csv格式"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="是否公开" prop="if_public">
                    <el-select v-model="uploadForm.if_public" placeholder="请选择是否公开" style="width: 300px">
                      <el-option v-for="option in publicOption" :key="option.type" :label="option.name" :value="option.type"></el-option>
                    </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="是否进行分析" prop="if_profile">
                      <el-select v-model="uploadForm.if_profile" placeholder="请选择是否公开" style="width:300px">
                        <el-option label="是" :value=true></el-option>
                        <el-option label="否" :value=false></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="数据简介" prop="introduction">
                      <el-input clearable  type="textarea" :rows="2"
                              v-model="uploadForm.introduction"></el-input>
                  </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item >
                      <el-row :gutter="40">
                        <el-col :span="10">
                          <el-upload  :action="uploadURL"
                          list-type="text"
                          :headers="headers"
                          :on-success="handleSuccess">
                            <el-button  type="primary" icon="el-icon-document-add">导入</el-button>
                          </el-upload>
                        </el-col>
                        <el-col :span="10">
                          <el-button  type="primary" @click="submitDataForm">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
          <!-- </el-tab-pane> -->
          <!-- <el-tab-pane label="生成数据" name="generate">
          </el-tab-pane> -->
        <!-- </el-tabs> -->
      </el-card>
    </div>
</template>

<script>
import datasetApi from '../../api/dataset'
// import request from '../../utils/request'
// 是否公开
const publicOption = [
  { type: true, name: '是' },
  { type: false, name: '否' }
]

export default {
  name: 'Data',
  computed: {
    headers () {
      return {
        // 这里一定要转成json，要不然就有双引号，token就出错了
        Authorization: JSON.parse(localStorage.getItem('token'))
        // 'content-type': 'multipart/form-data'
      }
    }
  },
  data () {
    return {
      publicOption,
      // Tab标签激活的名字
      activeName: 'upload',
      // 上传数据的表单
      uploadForm: {
        dataset_name: '',
        if_public: false,
        introduction: '',
        tmp_file_path: '',
        dataset_id: '',
        if_profile: false
      },
      // 上传文件地址
      uploadURL: 'http://10.214.211.205:8021/api/private/v1/dataset/upload',
      uploadFormRules: {
        dataset_name: [
          { required: true, message: '请输入数据名称', trigger: 'blur' }
        ],
        if_public: [
          { required: true, message: '请选择是否公开', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入数据简介', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    // 点击确定按钮，提交上传数据表单
    submitDataForm () {
      this.$refs.uploadFormRef.validate(valid => {
        if (valid) {
          // console.log(valid)
          console.log(this.uploadForm)
          datasetApi.addDataset(this.uploadForm).then(response => {
            const resp = response.data
            console.log(response)
            if (resp.meta.code === 200) {
              this.$message.success('数据上传成功')
            } else {
              this.$message.error('数据上传失败')
            }
          })
        }
      })
    },
    // 点击上传按钮，文件一旦上传成功调用这个函数
    handleSuccess (response) {
      console.log(response)
      const resp = response.data
      if (response.meta.code === 200) {
        this.$message.success('导入数据集成功')
      } else {
        this.$message.error('导入数据集失败')
      }
      this.uploadForm.dataset_id = resp.dataset_id
      this.uploadForm.tmp_file_path = resp.tmp_file_path
      console.log(this.uploadForm)
    },
    // 查询数据集按钮
    queryDataset () {
      this.$router.push('/data/dataset')
    },
    // 查询数据集按钮
    queryDatasetHuFea () {
      this.$router.push('/data/datasetHuFea')
    },
    downDataset () {
      datasetApi.download(this.uploadForm.dataset_id).then(response => {
        console.log(response)
      })
    }
  }
}
</script>

<style scoped>
.queryBtn{
  margin-bottom: 10px;
}
  .el-form {
    margin: 20px auto;
  }
  .el-form-item{
    margin-bottom: 40px;
  }
  /* .text-div{
    width: 300px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
  } */
</style>
